const { ccclass, property } = cc._decorator;

@ccclass
export default class TweenPanel extends cc.Component {
    public static Instance: TweenPanel;

    @property(cc.Node)
    Button_close: cc.Node = null;
    @property(cc.Node)
    parent: cc.Node = null;
    @property(cc.Node)
    param: cc.Node = null;

    @property(cc.Node)
    target: cc.Node = null;

    list: any[] = new Array();

    select_index_easing: number = 0;
    select_index_param: number = 0;

    tweenEasingList = [
        "quadIn", // 平方曲线缓入函数。
        "quadOut", //  平方曲线缓出函数。
        "quadInOut", //  平方曲线缓入缓出函数。
        "cubicIn", //  立方曲线缓入函数。
        "cubicOut", //  立方曲线缓出函数。
        "cubicInOut", //  立方曲线缓入缓出函数。
        "quartIn", //  四次方曲线缓入函数。
        "quartOut", // 四次方曲线缓出函数。
        "quartInOut", //  四次方曲线缓入缓出函数。
        "quintIn", //  五次方曲线缓入函数。
        "quintOut", //  五次方曲线缓出函数。
        "quintInOut", //  五次方曲线缓入缓出函数。
        "sineIn", //  正弦曲线缓入函数。
        "sineOut", //  正弦曲线缓出函数。
        "sineInOut", //  正弦曲线缓入缓出函数。
        "expoIn", //  指数曲线缓入函数。
        "expoOut", //  指数曲线缓出函数。
        "expoInOut", //  指数曲线缓入和缓出函数。
        "circIn", //  循环公式缓入函数。
        "circOut", //  循环公式缓出函数。
        "circInOut", //  指数曲线缓入缓出函数。
        "elasticIn", //  弹簧回震效果的缓入函数。
        "elasticOut", //  弹簧回震效果的缓出函数。
        "elasticInOut", //  弹簧回震效果的缓入缓出函数。
        "backIn", //  回退效果的缓入函数。
        "backOut", //  回退效果的缓出函数。
        "backInOut", //  回退效果的缓入缓出函数。
        "bounceIn", //  弹跳效果的缓入函数。
        "bounceOut", //  弹跳效果的缓出函数。
        "bounceInOut", //  弹跳效果的缓入缓出函数。
        "smooth", //  平滑效果函数。
        "fade", //  渐褪效果函数。
    ];

    tweenParamList = [
        "position", // position
        "scale", // scale
        "rotation", //  rotation
        "opacity", //  opacity
    ]

    onLoad() {
        TweenPanel.Instance = this;
        this.Init();
        this.ShowOn();
    }

    Init() {
        TweenPanel.SetAllChildrenAtive(this.parent, false);
        for (let index = 0; index < this.tweenEasingList.length; index++) {
            const item_data = this.tweenEasingList[index];
            const node = TweenPanel.GetFreeChild(this.parent);
            node.active = true;
            node.on(cc.Node.EventType.TOUCH_START, () => {
                this.select_index_easing = index;
                this.TweenTest();
                this.Refresh();
            }, this);
        }

        TweenPanel.SetAllChildrenAtive(this.param, false);
        for (let index = 0; index < this.tweenParamList.length; index++) {
            const node = TweenPanel.GetFreeChild(this.param);
            node.active = true;
            const Toggle_select: cc.Toggle = node.getComponent(cc.Toggle);
            Toggle_select.isChecked = false;
        }
    }

    Refresh() {
        for (let index = 0; index < this.parent.children.length; index++) {
            const item_data = this.tweenEasingList[index];
            const node = this.parent.children[index]
            node.active = true;
            const Label_describe = cc.find("Background/Label", node).getComponent(cc.Label);
            let str: string = `${String(item_data)}`;
            Label_describe.string = str;
            const Background = cc.find("Background", node).getComponent(cc.Sprite);
            Background.node.color = this.select_index_easing === index ? TweenPanel.Hex2color("ffff00") : TweenPanel.Hex2color("ffffff");
        }

        for (let index = 0; index < this.param.children.length; index++) {
            const item_data = this.tweenParamList[index];
            const node = this.param.children[index]
            node.active = true;
            const Label_describe = cc.find("Label", node).getComponent(cc.Label);
            let str: string = `${String(item_data)}`;
            Label_describe.string = str;
        }
    }

    TweenTest() {
        const easingType = this.tweenEasingList[this.select_index_easing];
        let pos_1: cc.Vec3 = cc.v3(-220, -300);
        let pos_2: cc.Vec3 = cc.v3(220, -280);

        const node = this.target;
        node.active = true;
        node.setPosition(pos_1);
        node.scale = 1;
        node.setRotation(0);
        node.opacity = 255;

        const duration: number = 0.6;

        let tween = cc.tween(node);

        let arr = this.GetSelectToggles();
        const obj: any = {};
        if (arr.indexOf("position") >= 0) {
            node.setPosition(pos_1);
            obj.position = pos_2;
        }
        if (arr.indexOf("scale") >= 0) {
            node.scale = 0;
            obj.scale = 1;
        }
        if (arr.indexOf("rotation") >= 0) {
            node.setRotation(0);
            obj.rotation = node.rotation + 360;
        }
        if (arr.indexOf("opacity") >= 0) {
            node.opacity = 0;
            obj.opacity = 255;
        }

        tween.to(duration, obj, { easing: easingType })
            .start()
    }

    GetSelectToggles() {
        let arr = [];
        for (let index = 0; index < this.param.children.length; index++) {
            const item_data = this.tweenParamList[index];
            const node = this.param.children[index];
            node.active = true;
            const Toggle_select: cc.Toggle = node.getComponent(cc.Toggle);
            console.log(index, Toggle_select.isChecked);
            if (Toggle_select.isChecked) {
                arr.push(item_data);
            }
        }

        return arr;
    }

    ShowOn() {
        this.node.active = true;
        this.Refresh();
    }

    ShowOff() {
        this.node.active = false;
    }

    //设置所有子物体可见或者不可见
    public static SetAllChildrenAtive(parent: cc.Node, active: boolean) {
        for (var i = 0; i <= parent.childrenCount - 1; i++) {
            var child: cc.Node = parent.children[i];
            child.active = active;
        }
    }

    public static GetFreeChild(parent: cc.Node): cc.Node {
        var c: cc.Node = null;
        for (var i = 0; i <= parent.childrenCount - 1; i++) {
            var child = parent.children[i];
            if (child.active == false) {
                c = child;
                break;
            }
        }

        if (c == null) {
            var node: cc.Node = cc.instantiate(parent.children[0]);
            node.parent = parent;
            node.setPosition(0, 0);
            c = node;
        }

        return c;
    }

    // --哈希颜色转RGB颜色
    public static Hex2color(hexColor) {
        const hex = hexColor.replace(/^#?/, "0x");
        const c = parseInt(hex);
        const r = c >> 16;
        const g = (65280 & c) >> 8;
        const b = 255 & c;

        return cc.color(r, g, b, 255);

        // 样例
        // headNode.color = hex2color("#F1F1F1");
    }
}

/**调试 */
window['TweenPanel'] = TweenPanel;



// ActionTest(_type = null) {
//     let pos_1: cc.Vec2 = cc.v2(-200, -500);
//     let pos_2: cc.Vec2 = cc.v2(200, -400);

//     const node = this.target;
//     node.active = true;
//     node.setPosition(pos_1);

//     const duration: number = 1;
//     const action = cc.moveTo(duration, pos_2);
//     // 停止所有动作
//     node.stopAllActions();
//     // 执行动作
//     node.runAction(action);
//     action.easing(_type());
// }

// arr2 = [
//     cc.easeIn,
//     cc.easeOut,
//     cc.easeInOut,
//     cc.easeExponentialIn,
//     cc.easeExponentialOut,
//     cc.easeExponentialInOut,
//     cc.easeSineIn,
//     cc.easeSineOut,
//     cc.easeSineInOut,
//     cc.easeElasticIn,
//     cc.easeElasticOut,
//     cc.easeElasticInOut,
//     cc.easeBounceIn,
//     cc.easeBounceOut,
//     cc.easeBounceInOut,
//     cc.easeBackIn,
//     cc.easeBackOut,
//     cc.easeBackInOut,
//     cc.easeBezierAction,
//     cc.easeQuadraticActionIn,
//     cc.easeQuadraticActionOut,
//     cc.easeQuadraticActionInOut,
//     cc.easeQuarticActionIn,
//     cc.easeQuarticActionOut,
//     cc.easeQuarticActionInOut,
//     cc.easeQuinticActionIn,
//     cc.easeQuinticActionOut,
//     cc.easeQuinticActionInOut,
//     cc.easeCircleActionIn,
//     cc.easeCircleActionOut,
//     cc.easeCircleActionInOut,
//     cc.easeCubicActionIn,
//     cc.easeCubicActionOut,
//     cc.easeCubicActionInOut,
// ]